<template>
  <div class="login_container">
    <div class="login_box">
      <el-row type="flex" justify="center" align="middle" style="width: 450px;">
        <el-col :span="18"><div class="grid-content bg-purple" style="margin-top: 90%;">
          <span id="title">用户登录</span>
          <el-form  :model="user" :rules="rules" ref="user" label-width="100px" hide-required-asterisk:true style="margin-top: 18px">
            <el-form-item label="用户名" prop="name">
              <el-input v-model="user.name"  placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="user.password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="dologin('user')">登陆</el-button>
              <el-button @click="doreset('user')">重置</el-button>
              <el-link @click="doregister" target="_blank">没有账号?点击注册</el-link>
            </el-form-item>
          </el-form>
        </div></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  data(){
    return{
      user:{
        name:'',
        password:''
      },
      rules: {
        name: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      }
    }
  },
  methods:{
    dologin(user) {
      this.$refs[user].validate((valid) => {
        if(valid){
          let params =new URLSearchParams();
          params.append("username",this.user.name);
          params.append("password",this.user.password);
          this.$axios({
            url:'/api/login',
            method:'post',
            data:params
          })
              .then(response =>{
                console.log(response.data);
                if(response.data.code==200){
                  sessionStorage.setItem("account",this.user.name)
                  localStorage.setItem("jwt",response.data.data.jwt);

                  console.log(response.data.data.type);
                  if (response.data.data.type == 1){
                    this.$router.push('/homePage');
                  } else {
                    this.$router.push('/');
                  }

                }else{
                  this.$message(response.data.msg);
                }
              });
        }else{
          alert('error!');
          return false;
        }
      });
    },
    doreset(user){
      this.$refs[user].resetFields();
    },
    doregister(){
      this.$router.push('/register');
    }


  },
  created:function (){
    this.$axios.get('api/logout').then(response =>{
      console.log(response.data);
    })
  }
}
</script>
<style scoped>
/* .login_container {
  height: 700px;
  width: 100%;
  background-image: url(https://api.vvhan.com/api/bing?rand=sj);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
} */
.login_container {
  background: url(https://api.vvhan.com/api/bing?rand=sj);
  width: 100%;
  height: 100%;
  position:fixed;
  background-size: cover;
  -webkit-background-size: cover;
  background-repeat: no-repeat;

}
.login_box{

  border-radius: 3px;
  /* background-image: url(https://api.vvhan.com/api/bing?rand=sj);
  background-size: cover; */
  position: absolute;
  left: 35%;
  top:35%;
  transform: translate(-0%,-50%);
}
#title{
  font-size: 24px;
  font-family: 黑体;
  font-weight: bold;
}
</style>